<template>
  <div class="app-container">
    <ECard rightTitle="菜单功能" :ilabel="ilabel" leftTitle="菜单">
      <template #headerRight>
        <el-select
          v-model="value"
          placeholder="请选择"
          @change="selectValue"
          size="mini"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
      <template #left>
        <el-row>
          <el-col :span="8"
            ><el-button type="primary" @click="addRoot(1)" size="medium"
              >新增一级菜单</el-button
            ></el-col
          >
          <el-col :span="6"
            ><el-button
              @click="addRoot(2)"
              size="medium"
              :disabled="!copyHandleId"
              >新增菜单</el-button
            ></el-col
          >
          <el-col :span="6"
            ><el-button @click="accessFn()" size="medium"
              >查看访问端菜单</el-button
            ></el-col
          >
        </el-row>
        <div class="title">所有菜单</div>
        <div class="caidan">
          <div>
            <el-tree
              :data="data"
              node-key="id"
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
              :props="defaultProps"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <i
                  :class="data.icon"
                  style="margin-right: 10px"
                  v-if="!svgData.includes(data.icon)"
                ></i>
                <svg-icon
                  :icon-class="data.icon"
                  style="margin-right: 10px"
                  v-else
                />
                <span>{{ node.label }}</span>
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link"> ... </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="edit(node, data)"
                      >修改</el-dropdown-item
                    >
                    <el-dropdown-item @click.native="remove(node, data)"
                      >删除</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
            </el-tree>
          </div>
        </div>
      </template>
      <template #right>
        <el-button
          type="primary"
          @click="addFunction(1)"
          size="medium"
          :disabled="!ilabel"
          >新增功能</el-button
        >
        <ETable
          ref="ETable"
          style="margin-top: 20px"
          :height="320"
          :titleObj="titleObj"
          @sortFun="sortFun"
          operateWidth="170"
          :reqObj="pageInitone"
          :reqFn="getSysMenuFunc"
        >
          <template v-slot="{ scope }">
            <el-button
              v-if="scope.MENU_FUNC_NAME != '(显示)'"
              @click="modifyClick(scope)"
              type="text"
              size="small"
              >修改</el-button
            >
            <el-divider
              direction="vertical"
              v-if="scope.MENU_FUNC_NAME != '(显示)'"
            ></el-divider>
            <el-button
              v-if="scope.MENU_FUNC_NAME != '(显示)'"
              @click="deleteClick(scope)"
              type="text"
              size="small"
              >删除</el-button
            >
            <el-divider
              direction="vertical"
              v-if="scope.MENU_FUNC_NAME != '(显示)'"
            ></el-divider>
            <el-button
              @click="addressManagement(scope)"
              type="text"
              size="small"
              >地址管理</el-button
            >
          </template>
        </ETable>
      </template>
    </ECard>
    <!-- 地址管理 -->
    <Edialog
      title="功能地址"
      :outershow="addressShow"
      @close="addressShow = false"
    >
      <el-button type="primary" @click="addFn()">新增地址</el-button>
      <ETable
        ref="ETable2"
        style="margin-top: 20px"
        :height="370"
        :titleObj="addtitleObj"
        operateWidth="90"
        :reqObj="addressSetOf"
        :reqFn="getSysMenuFuncUrl"
        adjacent
      >
        <template v-slot="{ scope }">
          <el-button type="text" size="small" @click="editFn(scope)"
            >修改</el-button
          >
          <el-divider direction="vertical"></el-divider>
          <el-button type="text" @click="deleteFn(scope)" size="small"
            >删除</el-button
          >
        </template>
      </ETable>
      <!-- 内部dialog -->
      <el-dialog
        width="30%"
        class="innerBox"
        :title="addressTitle"
        :visible.sync="innerVisible"
        :close-on-click-modal="false"
        append-to-body
      >
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          :rules="innerRules"
        >
          <el-form-item label="请求地址" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入请求地址（1-200）"
            ></el-input>
          </el-form-item>
          <el-form-item label="请求方法" prop="reqValue">
            <Eselect
              :options="reqOptions"
              :value="form.reqValue"
              @EselectChange="EselectChange"
            ></Eselect>
          </el-form-item>
          <el-form-item label="所属菜单功能">
            <el-input autosize v-model="affiliation" disabled></el-input>
          </el-form-item>
          <el-form-item label="所属菜单功能">
            <el-input autosize v-model="menuFunctionName" disabled></el-input>
          </el-form-item>
          <div class="but">
            <el-button @click="innerSave" type="primary">保存</el-button>
            <el-button
              @click="
                innerVisible = false;
                $refs.form.clearValidate();
              "
              >关闭</el-button
            >
          </div>
        </el-form>
      </el-dialog>
    </Edialog>
    <!-- 新增跟/子级以及修改 -->
    <div class="newRoot">
      <Edialog
        :title="leftTitle"
        :outershow="rootShow"
        @close="rootClose"
        saveClick
        @saveFn="newRootFn"
      >
        <div style="padding: 0 20px">
          <el-form
            ref="form1"
            :model="form1"
            label-width="100px"
            :rules="rootRules"
          >
            <el-form-item label="菜单编码" class="line1" prop="menuCode">
              <el-input
                v-model="handleId"
                disabled
                v-if="leftTitle != '修改菜单'"
                :style="{ width: `${handleId.length * 28}px` }"
              ></el-input>
              <el-input
                :disabled="leftTitle == '修改菜单'"
                v-model="form1.menuCode"
                placeholder="请输入菜单编码（1-2）"
              ></el-input>
            </el-form-item>
            <el-form-item label="菜单名称" prop="menuName">
              <el-input
                v-model="form1.menuName"
                placeholder="请输入菜单名称（1-40）"
              ></el-input>
            </el-form-item>
            <el-form-item label="菜单排序">
              <el-input-number
                v-model="form1.sortNo"
                @change="handleChange"
                :min="1"
                :max="127"
                label="描述文字"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="地址编码" prop="addressCode">
              <el-input
                v-model="form1.addressCode"
                placeholder="请输入地址编码（1-40）"
              ></el-input>
            </el-form-item>
            <el-form-item label="菜单地址">
              <el-input
                v-model="form1.address"
                placeholder="请输入菜单地址（1-200）"
              ></el-input>
            </el-form-item>
            <el-form-item label="菜单描述">
              <el-input
                v-model="form1.menuDesc"
                placeholder="请输入菜单描述（1-200）"
              ></el-input>
            </el-form-item>
            <el-form-item label="图标地址">
              <el-input
                v-model="form1.iconAddress"
                placeholder="请输入图标地址（1-200）"
              ></el-input>
            </el-form-item>
            <el-form-item label="访问端类型" prop="accessType">
              <el-select
                v-model="form1.accessType"
                multiple
                placeholder="请选择访问端类型"
              >
                <el-option
                  v-for="item in accessTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属父菜单" v-if="!handleId">
              <el-input v-model="father" disabled></el-input>
            </el-form-item>
            <el-form-item label="所属系统">
              <el-input
                v-model="system"
                disabled
                :placeholder="sysPlace"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </Edialog>
    </div>
    <!-- 新增菜单功能 -->
    <Edialog
      :title="rightTitle"
      :outershow="menuUseShow"
      @close="
        menuUseShow = false;
        $refs.form2.clearValidate();
      "
      saveClick
      @saveFn="newSaveFn"
    >
      <div style="padding: 0 20px">
        <el-form
          ref="form2"
          :model="form2"
          label-width="110px"
          :rules="menuRules"
        >
          <el-form-item label="菜单功能名称" prop="menuFuncName">
            <el-input
              v-model="form2.menuFuncName"
              placeholder="请输入菜单功能名称（1-40）"
            ></el-input>
          </el-form-item>
          <el-form-item label="元素ID" prop="pageId">
            <el-input
              v-model="form2.pageId"
              placeholder="请输入元素ID（1-200）"
            ></el-input>
          </el-form-item>
          <el-form-item label="功能描述">
            <el-input
              v-model="form2.menuFuncDesc"
              placeholder="请输入功能描述（1-200）"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属菜单">
            <el-input v-model="affiliation" disabled></el-input>
          </el-form-item>
        </el-form>
      </div>
    </Edialog>
    <!-- 查看访问端菜单 -->
    <Edialog title="查看访问端菜单" :outershow="viewShow" @close="menuClose">
      <div style="padding: 0 20px">
        <el-form ref="form3" label-width="100px">
          <el-form-item label="访问端类型">
            <Eselect
              :options="options2"
              :value="value2"
              @EselectChange="EselectChangeTwo"
            ></Eselect>
          </el-form-item>
          <el-form-item label="访问端菜单">
            <div class="accessEnd">
              <el-tree
                :data="dataOne"
                node-key="idOne"
                :expand-on-click-node="false"
                :props="defaultPropstwo"
              >
              </el-tree>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </Edialog>
  </div>
</template>

<script>
let id = 1000;
let idOne = 100;
import ECard from "@/components/ECard";
import ETable from "@/components/ETable";
import Edialog from "@/components/Edialog";
import { getSelectData } from "@/utils/publicReq";
import {
  getSysMenutreeAll,
  getSysMenuMenuCode,
  getqueryAllSystemMap,
  deleteSysMenuFuncUrl,
  getSysMenuFuncUrl,
  putSysMenuFuncUrl,
  deleteSysMenuFunc,
  postSysMenuFuncUrl,
  putSysMenu,
  putSonSysMenu,
  deleteSysMenu,
  postSysMenu,
  getSysMenuFunc,
  putSysMenuFunc,
  postSysMenuFunc,
} from "@/api/management/menu";
import { fd } from "@/utils";
import { getSysCodeByTypeCode } from "@/api/management/code";
import Eselect from "@/components/Eselect";
export default {
  name: "Menu",
  components: {
    ECard,
    ETable,
    Edialog,
    Eselect,
  },
  data() {
    return {
      // 本地svg数组
      svgData: ["tree", "form", "link", "nested", "table", "pay"],
      // 表单校验
      rootRules: {
        menuCode: [
          { required: true, message: "请输入菜单编码（1-2）", trigger: "blur" },
          { min: 1, max: 2, message: "请输入1-2位", trigger: "blur" },
        ],
        menuName: [
          {
            required: true,
            message: "请输入菜单名称（1-40）",
            trigger: "blur",
          },
          { min: 1, max: 40, message: "请输入1-40位", trigger: "blur" },
        ],
        addressCode: [
          {
            required: true,
            message: "请输入地址编码（1-40）",
            trigger: "blur",
          },
          { min: 1, max: 40, message: "请输入1-40位", trigger: "blur" },
        ],
        accessType: [
          { required: true, message: "请选择访问端类型", trigger: "blur" },
        ],
      },
      menuRules: {
        menuFuncName: [
          {
            required: true,
            message: "请输入菜单功能名称（1-40）",
            trigger: "blur",
          },
          { min: 1, max: 40, message: "请输入1-40位", trigger: "blur" },
        ],
        pageId: [
          { required: true, message: "请输入元素ID（1-200）", trigger: "blur" },
          { min: 1, max: 200, message: "请输入1-200位", trigger: "blur" },
        ],
      },
      innerRules: {
        name: [
          {
            required: true,
            message: "请输入请求地址（1-200）",
            trigger: "blur",
          },
          { min: 1, max: 200, message: "请输入1-200位", trigger: "blur" },
        ],
        reqValue: [
          { required: true, message: "请选择请求方式", trigger: "blur" },
        ],
      },
      data: [],
      dataOne: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      defaultPropstwo: {
        children: "children",
        label: "name",
      },
      addressSetOf: {
        menuFuncId: "",
      },
      options: [],
      value: "S1",
      addressShow: false,
      innerVisible: false,
      form: {
        name: "",
        reqValue: "",
      },
      reqOptions: [],
      value2: "",
      addMenuShow: false,
      form1: {
        menuCode: "",
        menuName: "",
        sortNo: "1",
        addressCode: "",
        address: "",
        menuDesc: "",
        iconAddress: "",
        accessType: [],
      },
      accessTypeOptions: [],
      father: "",
      system: "",
      rootShow: false,
      leftTitle: "",
      menuUseShow: false,
      form2: {
        menuFuncName: "",
        pageId: "",
        menuFuncDesc: "",
      },
      rightTitle: "",
      viewShow: false,
      options2: [],
      handleId: "",
      copyHandleId: "",
      handlepid: "",
      titleObj: [
        {
          prop: "MENU_FUNC_NAME",
          label: "功能名称",
          width: "160",
          sortable: "custom",
        },
        { prop: "PAGE_ID", label: "功能页面ID", width: "160" },
        { prop: "MENU_FUNC_DESC", label: "功能描述", width: "" },
      ],
      affiliation: "",
      rightModifyId: "",
      addtitleObj: [
        { prop: "REQUEST_URL", label: "请求地址" },
        { prop: "REQUEST_METHOD_NAME", label: "请求方法" },
      ],
      menuFunctionName: "",
      menuFunctionId: "",
      addressId: "",
      addressTitle: "",
      ilabel: "",
      pageInitone: {
        menuCode: "",
        sortStr: "",
      },
      sysPlace: "",
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getSysMenuFunc,
    getSysMenuFuncUrl,
    EselectChange(val) {
      this.form.reqValue = val;
    },
    async EselectChangeTwo(val) {
      this.value2 = val;
      let data = await getSysMenutreeAll({
        systemCode: this.value,
        accessType: val,
      });
      if (data.code == 0 && data.data.bcode == 0) {
        this.dataOne = this.arrayToTree(data.data.bdata, "");
      }
    },
    rootClose() {
      this.rootShow = false;
      this.$refs.form1.clearValidate();
      this.form1 = {
        menuCode: "",
        menuName: "",
        sortNo: "1",
        addressCode: "",
        address: "",
        menuDesc: "",
        iconAddress: "",
        accessType: [],
      };
    },
    async getData() {
      let result = await getqueryAllSystemMap();
      if (result.code == 0 && result.data.bcode == 0) {
        let key = Object.keys(result.data.bdata);
        let value = Object.values(result.data.bdata);
        let arr = key.map((item, index) => {
          return { label: value[index], value: key[index] };
        });
        this.options = arr;
        this.sysPlace = arr[0].label;
        this.value = this.options[0].value;
        // this.handleId = arr[0].value
        let res = await getSysMenutreeAll({ systemCode: this.value });
        this.data = this.arrayToTree(res.data.bdata, "");
        this.accessTypeOptions = await getSelectData("010202001");
      }
    },
    arrayToTree(arr, pid) {
      let list = [];
      arr.forEach((v) => {
        if (v.pid == pid) {
          list.push(v);
          const children = this.arrayToTree(arr, v.id);
          if (children.length) v.children = children;
        }
      });
      return list;
    },
    handleNodeClick(data) {
      console.log("行点击", data);
      this.ilabel = data.name;
      this.father = data.name;
      this.affiliation = data.name;
      this.handleId = data.id;
      this.copyHandleId = data.id;
      this.handlepid = data.pid;
      this.pageInitone.menuCode = this.handleId;
      this.$refs.ETable.getData();
    },
    async sortFun(str) {
      this.pageInitone.sortStr = str;
      this.$refs.ETable.getData();
    },
    // 删除元素方法
    async remove(node, data) {
      let t = await this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      if (t) {
        let res = await deleteSysMenu(data.id);
        if (res.code == 0 && res.data.bcode == 0) {
          this.$message.success("删除成功");
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex((d) => d.id === data.id);
          children.splice(index, 1);
        }
      }
    },
    // 下拉框选择的值
    async selectValue(val) {
      this.father = "";
      this.options.find((item) => {
        if (item.value == val) {
          this.sysPlace = item.label;
        }
      });
      this.value = val;
      this.handleId = "";
      this.ilabel = "";
      this.handlepid = "";
      this.copyHandleId = "";
      let res = await getSysMenutreeAll({ systemCode: val });
      this.data = this.arrayToTree(res.data.bdata, "");
    },
    modifyClick(row) {
      console.log("右侧修改", row);
      this.rightModifyId = row.ID;
      this.form2.menuFuncName = row.MENU_FUNC_NAME;
      this.form2.pageId = row.PAGE_ID;
      this.form2.menuFuncDesc = row.MENU_FUNC_DESC;
      this.addFunction();
    },
    async deleteClick(row) {
      let t = await this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      if (t) {
        let res = await deleteSysMenuFunc(row.ID);
        if (res.code == 0 && res.data.bcode == 0) {
          this.$message.success("删除成功");
          this.menuUseShow = false;
          (this.form2 = {
            menuFuncName: "",
            pageId: "",
            menuFuncDesc: "",
          }),
            this.$refs.ETable.getData();
        }
      }
    },
    handleChange(value) {
      this.form1.sort = value;
    },
    async addRoot(value) {
      if (value == 1) {
        this.handleId = this.value;
        this.form1.accessType.push(this.accessTypeOptions[0].value);
        this.leftTitle = "新增一级菜单";
        this.rootRules.menuCode = [
          { required: true, message: "请输入菜单编码（1-2）", trigger: "blur" },
          { min: 1, max: 2, message: "请输入1-2位", trigger: "blur" },
        ];
      } else if (value == 2) {
        if (this.form1.accessType.length == 0)
          this.form1.accessType.push(this.accessTypeOptions[0].value);
        this.leftTitle = "新增菜单";
        this.handleId = this.copyHandleId;
        this.rootRules.menuCode = [
          { required: true, message: "请输入菜单编码（1-2）", trigger: "blur" },
          { min: 1, max: 2, message: "请输入1-2位", trigger: "blur" },
        ];
      } else {
        this.leftTitle = "修改菜单";
      }
      this.rootShow = true;
    },
    newRootFn() {
      this.$refs.form1.validate(async (valid) => {
        if (valid) {
          let tem = this.form1.accessType.toString();
          let res;
          if (this.leftTitle == "新增一级菜单") {
            let obj = JSON.parse(
              JSON.stringify({
                ...this.form1,
                systemCode: this.value,
                accessType: tem,
              })
            );
            obj.menuCode = obj.systemCode + obj.menuCode;
            res = await putSysMenu(fd(obj));
          } else if (this.leftTitle == "新增菜单") {
            res = await putSonSysMenu(
              fd({
                ...this.form1,
                systemCode: this.value,
                pcode: this.handleId,
                menuCode: this.handleId + this.form1.menuCode,
                accessType: tem,
              })
            );
          } else {
            res = await postSysMenu(
              fd({
                ...this.form1,
                systemCode: this.value,
                pcode: this.handlepid,
              })
            );
          }
          if (res.code == 0 && res.data.bcode == 0) {
            this.$message.success(res.data.bmsg);
            this.getData();
            this.rootShow = false;
            this.form1 = {
              menuCode: "",
              menuName: "",
              sortNo: "1",
              addressCode: "",
              address: "",
              menuDesc: "",
              iconAddress: "",
              accessType: [],
            };
          }
        }
      });
    },
    addFunction(val) {
      if (val) {
        this.rightTitle = "新增菜单功能";
        this.form2.menuFuncName = "";
        this.form2.pageId = "";
        this.form2.menuFuncDesc = "";
      } else {
        this.rightTitle = "修改菜单功能";
      }
      this.menuUseShow = true;
    },
    async accessFn() {
      let data = await getSysCodeByTypeCode("010202001");
      if (data.code == 0 && data.data.bcode == 0) {
        let key = Object.keys(data.data.bdata);
        let value = Object.values(data.data.bdata);
        let arr = key.map((item, index) => {
          return { label: value[index], value: key[index] };
        });
        this.options2 = arr;
        this.value2 = arr[0].value;
        this.viewShow = true;
      }
      let res = await getSysMenutreeAll({
        systemCode: this.value,
        accessType: this.value2,
      });
      this.dataOne = this.arrayToTree(res.data.bdata, "");
      console.log(res);
    },
    async edit(node, data) {
      console.log("左侧修改", node, data);
      this.form1.menuCode = data.id;
      // 修改不需要校验规则
      this.rootRules.menuCode = [];
      let res = await getSysMenuMenuCode(data.id);
      this.form1.menuName = res.data.bdata.MENUNAME;
      this.form1.sortNo = res.data.bdata.SORTNO;
      this.form1.addressCode = res.data.bdata.ADDRESSCODE;
      this.form1.address = res.data.bdata.ADDRESS;
      this.form1.menuDesc = res.data.bdata.MENUDESC;
      this.form1.iconAddress = res.data.bdata.ICON_ADDRESS;
      let arr = res.data.bdata.ACCESS_TYPE.split(",");
      arr.forEach((item) => {
        this.form1.accessType.push(item);
      });
      this.addRoot(3);
    },
    async newSaveFn() {
      this.$refs.form2.validate(async (valid) => {
        if (valid) {
          let res;
          if (this.rightTitle == "新增菜单功能") {
            res = await putSysMenuFunc(
              fd({ ...this.form2, menuCode: this.handleId })
            );
          } else if (this.rightTitle == "修改菜单功能") {
            res = await postSysMenuFunc(
              fd({
                ...this.form2,
                menuCode: this.handleId,
                id: this.rightModifyId,
              })
            );
          }
          if (res.code == 0 && res.data.bcode == 0) {
            this.$message.success("操作成功");
            this.menuUseShow = false;
            (this.form2 = {
              menuFuncName: "",
              pageId: "",
              menuFuncDesc: "",
            }),
              this.$refs.ETable.getData();
          }
        }
      });
    },
    async addressManagement(scope) {
      this.menuFunctionName = scope.MENU_FUNC_NAME;
      this.menuFunctionId = scope.ID;
      this.addressSetOf.menuFuncId = scope.ID;
      let data = await getSysCodeByTypeCode("010202002");
      if (data.code == 0 && data.data.bcode == 0) {
        let key = Object.keys(data.data.bdata);
        let value = Object.values(data.data.bdata);
        let arr = key.map((item, index) => {
          return { label: value[index], value: key[index] };
        });
        this.reqOptions = arr;
        this.form.reqValue = this.reqOptions[0].label;
      }
      this.addressShow = true;
      this.$nextTick(() => this.$refs.ETable2.getData());
    },
    async innerSave() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let res;
          let tem = 0;
          if (this.form.reqValue == "PUT") tem = 1;
          if (this.form.reqValue == "POST") tem = 2;
          if (this.form.reqValue == "DELETE") tem = 3;
          if (this.form.reqValue == "GET") tem = 4;
          if (this.addressTitle == "新增菜单地址") {
            res = await putSysMenuFuncUrl(
              fd({
                menuFuncId: this.menuFunctionId,
                requestUrl: this.form.name,
                requestMethod: tem == 0 ? this.form.reqValue : tem,
              })
            );
          } else {
            res = await postSysMenuFuncUrl(
              fd({
                menuFuncId: this.menuFunctionId,
                requestUrl: this.form.name,
                requestMethod: tem == 0 ? this.form.reqValue : tem,
                id: this.addressId,
              })
            );
          }
          if (res.code == 0 && res.data.bcode == 0) {
            this.$message.success("操作成功");
            this.form.name = "";
            this.form.reqValue = "";
            this.$refs.ETable2.pageInfo.page = 1;
            this.$refs.ETable2.getData();
            this.innerVisible = false;
          }
        }
      });
    },
    async deleteFn(scope) {
      console.log("地址管理弹框删除scope", scope);
      let t = await this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      if (t) {
        let res = await deleteSysMenuFuncUrl(scope.ID);
        if (res.data && res.data.bcode == 0) {
          this.$message.success("删除成功");
          this.$refs.ETable2.pageInfo.page = 1;
          this.$refs.ETable2.getData();
        }
      }
    },
    async editFn(scope) {
      this.addressId = scope.ID;
      this.form.name = scope.REQUEST_URL;
      this.form.reqValue = scope.REQUEST_METHOD_NAME;
      this.addressTitle = "修改菜单地址";
      this.innerVisible = true;
    },
    async addFn() {
      this.form.reqValue = "";
      this.form.name = "";
      this.addressTitle = "新增菜单地址";
      let data = await getSysCodeByTypeCode("010202002");
      if (data.code == 0 && data.data.bcode == 0) {
        let key = Object.keys(data.data.bdata);
        let value = Object.values(data.data.bdata);
        let arr = key.map((item, index) => {
          return { label: value[index], value: key[index] };
        });
        this.reqOptions = arr;
        this.form.reqValue = this.reqOptions[0].label;
      }
      this.innerVisible = true;
    },
    menuClose() {
      this.viewShow = false;
      this.options2 = [];
      this.value2 = "";
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep {
  .el-card__body {
    position: relative !important;
  }
}
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-size: 14px;
  background-color: #66b1ff;
  margin-top: 20px;
  color: #fff;
}
.caidan {
  width: 100%;
  height: calc(100% - 190px);
  border: 1px solid #ccc;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .el-tree {
    // padding: 20px;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-dropdown {
    position: absolute;
    background-color: #fff;
    right: 0px;
    width: 20px;
  }
  .el-tree-node:focus > .el-tree-node__content .el-dropdown {
    background-color: #f5f7fa;
  }
  .el-tree-node__content:hover .el-dropdown {
    background-color: #f5f7fa;
  }

  .el-dropdown .el-button {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.innerBox {
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #ccc;
  }
}
.but {
  display: flex;
  align-items: center;
  justify-content: center;
  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }
}
.innerSelect {
  width: 100%;
}
.line1 {
  ::v-deep .el-form-item__content {
    display: flex;
    .is-disabled {
      margin-right: 10px;
    }
  }
}
.accessEnd {
  padding: 10px;
  border: 1px solid #ccc;
  height: 400px;
  overflow-y: auto;
}
.newRoot {
  ::v-deep .el-form .el-form-item:nth-child(8) {
    .el-form-item__content > div {
      width: 100%;
    }
  }
}
</style>
